<template>
	<a-spin :spinning="loadSpinning">
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="vertical"
			:label-col="{ ...layout.labelCol, offset: 0 }"
			:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
		>
			<a-row :gutter="8">
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="IAM认证地址：" name="SNOWY_THIRD_IAM_AUTHORIZE_URL">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_AUTHORIZE_URL" placeholder="请输入IAM认证地址" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="IAM获取token地址：" name="SNOWY_THIRD_IAM_ACCESS_TOKEN_URL">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_ACCESS_TOKEN_URL" placeholder="请输入IAM获取token地址" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="IAM获取用户信息地址：" name="SNOWY_THIRD_IAM_USER_INFO_URL">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_USER_INFO_URL" placeholder="请输入IAM获取用户信息地址" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="IAM客户端ID：" name="SNOWY_THIRD_IAM_CLIENT_ID">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_CLIENT_ID" placeholder="请输入IAM客户端ID" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="IAM客户端SECRET：" name="SNOWY_THIRD_IAM_CLIENT_SECRET">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_CLIENT_SECRET" placeholder="请输入IAM客户端SECRET" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item label="重定向URL：" name="SNOWY_THIRD_IAM_REDIRECT_URL">
						<a-input v-model:value="formData.SNOWY_THIRD_IAM_REDIRECT_URL" placeholder="请输入重定向URL" />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-form-item>
						<a-space>
							<a-button type="primary" :loading="submitLoading" @click="onSubmit()">保存</a-button>
							<a-button @click="() => formRef.resetFields()">重置</a-button>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-spin>
</template>

<script setup name="giteeThirdForm">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import { message } from 'ant-design-vue'
	import configApi from '@/api/dev/configApi'

	const formRef = ref()
	const formData = ref({})
	const submitLoading = ref(false)
	const loadSpinning = ref(true)

	// 查询此界面的配置项,并转为表单
	const param = {
		category: 'THIRD_IAM'
	}
	configApi.configList(param).then((data) => {
		loadSpinning.value = false
		if (data) {
			data.forEach((item) => {
				formData.value[item.configKey] = item.configValue
			})
		} else {
			message.warning('表单项不存在，请初始化数据库')
		}
	})

	// 默认要校验的
	const formRules = {
		SNOWY_THIRD_IAM_AUTHORIZE_URL: [required('请输入IAM认证地址')],
		SNOWY_THIRD_IAM_ACCESS_TOKEN_URL: [required('请输入IAM获取token地址')],
		SNOWY_THIRD_IAM_USER_INFO_URL: [required('请输入IAM获取用户信息地址')],
		SNOWY_THIRD_IAM_CLIENT_ID: [required('请输入IAM客户端ID')],
		SNOWY_THIRD_IAM_CLIENT_SECRET: [required('请输入IAM客户端SECRET')],
		SNOWY_THIRD_IAM_REDIRECT_URL: [required('请输入重定向URL')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				let submitParam = cloneDeep(formData.value)
				const param = Object.entries(submitParam).map((item) => {
					return {
						configKey: item[0],
						configValue: item[1]
					}
				})
				configApi
					.configEditForm(param)
					.then(() => {})
					.finally(() => {
						submitLoading.value = false
					})
			})
			.catch(() => {})
	}
	const layout = {
		labelCol: {
			span: 24
		},
		wrapperCol: {
			span: 12
		}
	}
</script>
